<template>
	<div class="SideslipMenu">
		<div class="SideslipMenu-colse">
			<img class="sc-colse-img" @click="colseGO(0)" src="../assets/img/close.png" />
		</div>
		<div class="SideslipMenu-content">
			<div class="sc-item" @click="colseGO(1)">
				<div class="sci-icon">
					<div class="scii-imgbox">
						<img class="sscii-img" src="../assets/img/images/user-icon_1.png" />
					</div>
				</div>
				<div class="sci-con">
					<div class="scic-left">
						<div class="scicl-title">主页</div>
						<div class="scicl-info">发现新鲜事物</div>
					</div>
					<span class="sctcl-more"></span>
				</div>
			</div>
			<div class="sc-item" @click="colseGO(2)">
				<div class="sci-icon">
					<div class="scii-imgbox">
						<img class="sscii-img" src="../assets/img/images/user-icon_2.png" />
					</div>
				</div>
				<div class="sci-con" @click="colseGO(3)">
					<div class="scic-left">
						<div class="scicl-title">订单</div>
						<div class="scicl-info">随时查看您的订单</div>
					</div>
					<span class="sctcl-more"></span>
				</div>
			</div>
			<div class="sc-item" @click="colseGO(3)">
				<div class="sci-icon">
					<div class="scii-imgbox">
						<img class="sscii-img" src="../assets/img/images/user-icon_3.png" />
					</div>
				</div>
				<div class="sci-con">
					<div class="scic-left">
						<div class="scicl-title">收藏</div>
						<div class="scicl-info">收藏您喜欢的民宿</div>
					</div>
					<span class="sctcl-more"></span>
				</div>
			</div>
			<div class="sc-item" @click="colseGO(4)">
				<div class="sci-icon">
					<div class="scii-imgbox">
						<img class="sscii-img" src="../assets/img/images/user-icon_4.png" />
					</div>
				</div>
				<div class="sci-con">
					<div class="scic-left">
						<div class="scicl-title">消息</div>
						<div class="scicl-info">和喜欢的民宿一起聊天</div>
					</div>
					<span class="sctcl-more"></span>
				</div>
			</div>
			<div class="sc-item" @click="colseGO(5)">
				<div class="sci-icon">
					<div class="scii-imgbox">
						<img class="sscii-img" src="../assets/img/images/user-icon_5.png" />
					</div>
				</div>
				<div class="sci-con">
					<div class="scic-left">
						<div class="scicl-title">我</div>
						<div class="scicl-info">房客个人中心</div>
					</div>
					<span class="sctcl-more"></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import eventBus from '../assets/libs/eventBus.js'
	export default {
		name: "SideslipMenu",
		data() {
			return {
				message: ""
			}
		},
		methods: {
			colseGO(i) {
				var that = this;
				eventBus.$emit('msg', true);

				if(i == 0) {
					that.$router.go(-1);
				}
				if(i == 1) {
					that.$router.push({
						path: "/"
					})
				}
				if(i == 2) {
					that.$router.push({
						path: "/TenantOrder"
					});
				}
				if(i == 3) {
					that.$router.push({
						path: "/CollectionList"
					});
				}
				if(i == 4) {
										that.$router.push({
											path:"/ZhuddNews"
										});
				}
				if(i == 5) {
					that.$router.push({
						path: "/tenantPersonal"
					});
				}
			}
		}
	}
</script>

<style>
	.SideslipMenu {
		color: #282828;
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.SideslipMenu .SideslipMenu-colse {
		width: 100%;
		padding: .23rem .24rem;
		box-sizing: border-box;
		border-bottom: 1px solid #eeecec;
	}
	.SideslipMenu .sc-colse-img {
		display: block;
		width: .46rem;
		height: .46rem;
	}
	
	.SideslipMenu .sc-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 .24rem;
		box-sizing: border-box;
		line-height: .31rem;
	}
	
	.SideslipMenu .scii-imgbox {
		width: .53rem;
		height: .47rem;
	}
	
	.SideslipMenu .sscii-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.SideslipMenu .scicl-title {
		font-size: .35rem;
	}
	
	.SideslipMenu .scicl-info {
		font-size: .28rem;
		margin-top: .29rem;
		color: #a4a4a4;
	}
	
	.SideslipMenu .sci-con {
		width: 6.24rem;
		padding: .38rem 0;
		margin-left: .32rem;
		border-bottom: 1px solid #a4a4a4;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.SideslipMenu .sctcl-more {
		display: block;
		width: .24rem;
		height: .24rem;
		border: 1px solid #bcbcbc;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
	}
</style>